<template>
  <div>
    <Tooltip>
      <template #tooltip>I am a <strong style="color: red">tooltip</strong></template>
      <Icon />
    </Tooltip>

    <h4>{{ msg }}
      <AnotherTooltip>This is another <strong style="color:red">tooltip</strong></AnotherTooltip>
    </h4>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import Tooltip from './Tooltip.vue';
import Icon from './Icon.vue';
import AnotherTooltip from './AnotherTooltip.vue';

const msg = ref('from Tooltip')//https://stackoverflow.com/questions/78520608/slot-as-a-parent-of-another-slot-in-vue/78525838#78525838
</script>
<style lang="">

</style>
<!-- <script setup>
import { ref } from 'vue';
import Tooltip from './Tooltip.vue';
import Icon from './Icon.vue';

const msg = ref('Hello World!')

</script>

<template>
  <tooltip>
    <template #tooltip>I am a <strong style="color: red">tooltip</strong></template>
    <icon />
  </tooltip>
</template> -->
